<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main class="main">

    </main>
</body>
<script>
    /**
 * 1. 定义一个数组，数组成员随便放置（要求以Array.of()函数来创建）。
 * 2. 使用该数组，创建一组div，要求这一组div的内容由上面数组成员构成（要求使用map函数创建DOM对象构成的数组）。
 * 3. 将div放入到页面中显示。
 */

    let arr = Array.of("a", "b", 1, 2, 3, "c", "d");

    let divs = arr.map(v => {
        let div = document.createElement("div");
        div.innerText = v;
        return div;
    })

    let main = document.querySelector(".main");
    divs.forEach(v => main.appendChild(v));

    // 消灭for循环，使用迭代函数+箭头函数可以大大地减少代码量。
    

</script>

</html>